<html>

<head>
    <title>OpenGlobus - Earth planet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/og.css" type="text/css" />
</head>
<style>
    input {
        position: absolute;
        width: 250px;
        top: 0;
        margin: 15px;
        padding: 2px;
    }

    body {
        margin: 0;
    }
</style>

<body>
    <div id="globus" style="width:100%;height:100%"></div>
    <script type="module">
        'use strict';

        import { Globe } from '../../src/og/Globe.js';
        import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';
        import { XYZ } from '../../src/og/layer/XYZ.js';
        import { Control } from '../../src/og/control/Control.js';
        import { Vec3 } from '../../src/og/math/Vec3.js';
        import { LonLat } from '../../src/og/LonLat.js';

        //Define custom control class
        class CustomControl extends Control {
            constructor(options) {
                super(options);
            }

            static parseLonLat(val) {
                var parts = val.match(/([+-]?\d+\.\d+).+?([+-]?\d+\.\d+)/);
                if (parts) return new LonLat(parts[2], parts[1]);
                return new LonLat();
            }

            static getUrlVars() {
                var vars = {};
                var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
                    function (m, key, value) {
                        vars[key] = value;
                    });
                return vars;
            }

            onadd() {
                var lonlatEl = document.createElement("input");
                lonlatEl.type = "text";
                lonlatEl.placeholder = "Enter coordinates";
                var that = this;
                lonlatEl.addEventListener("keyup", function (event) {
                    event.preventDefault();
                    if (event.keyCode == 13) {
                        that.planet.flyLonLat(CustomControl.parseLonLat(this.value));
                    }
                });

                this.renderer.div.appendChild(lonlatEl);
            }

            oninit() {
                var params = document.URL.split('?');
                if (params[1]) {
                    var urlVars = CustomControl.getUrlVars(params[1]);
                    var e = urlVars.e.split(','),
                        f = urlVars.f.split(','),
                        u = urlVars.u.split(',');

                    e = new Vec3(parseFloat(e[0]), parseFloat(e[1]), parseFloat(e[2]));
                    f = new Vec3(parseFloat(f[0]), parseFloat(f[1]), parseFloat(f[2]));
                    u = new Vec3(parseFloat(u[0]), parseFloat(u[1]), parseFloat(u[2]));

                    globus.planet.camera.set(e, e.add(f), u);
                    globus.planet.camera.update();
                }

                this.planet.camera.events.on("moveend", function (c) {
                    var splits = document.URL.split('?');
                    var cameraStr = "e=" + c.eye.x.toFixed(5) + "," + c.eye.y.toFixed(5) + "," + c.eye.z.toFixed(5) +
                        "&f=" + c.getForward().x.toFixed(5) + "," + c.getForward().y.toFixed(5) + "," + c.getForward().z.toFixed(5) +
                        "&u=" + c.getUp().x.toFixed(5) + "," + c.getUp().y.toFixed(5) + "," + c.getUp().z.toFixed(5);
                    history.replaceState("", "", splits[0] + "?" + cameraStr);
                });
            }
        };

        let osm = new XYZ("OpenStreetMap", {
            specular: [0.0003, 0.00012, 0.00001],
            shininess: 20,
            diffuse: [0.89, 0.9, 0.83],
            isBaseLayer: true,
            url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            visibility: true,
            attribution: 'Data @ OpenStreetMap contributors, ODbL'
        });

        let globus = new Globe({
            "target": "globus",
            "name": "Earth",
            "terrain": new GlobusTerrain(),
            "layers": [osm]
        });

        globus.planet.addControl(new CustomControl);
    </script>
</body>

</html>